<template>
  <div>
    <search-control :searh-bar="searhBar" @search="search" />
    <el-card style="margin: 20px">
      <el-table
        :data="tableData"
        border
        style="width: 70vw"
      >

        <el-table-column
          align="center"
          prop="no"
          label="序号"
          width="50"
        />

        <el-table-column
          align="center"
          prop="number"
          label="承运商编号"
          width="130"
        />
        <el-table-column
          align="center"
          prop="owner"
          label="承运商名称"
          width="130"
        />

        <el-table-column
          align="center"
          prop="name"
          label="联系人"
          width="130"
        />
        <el-table-column
          align="center"
          prop="mobile"
          label="联系人电话"
          width="130"
        />
        <el-table-column
          align="center"
          prop="email"
          label="联系邮箱"
          width="200"
        />
        <el-table-column
          align="center"
          prop="area"
          label="省/市/区"
          width="250"
        />
        <el-table-column
          align="center"
          prop="address"
          label="详细地址"
          width="300"
        />
        <el-table-column
          align="center"
          prop="time"
          label="更新时间"
          width="150"
        />
      </el-table>
    </el-card>

  </div>
</template>

<script>
import SearchControl from '@/components/SearchControl'
export default {
  components: { SearchControl },
  data() {
    return {
      searhBar: [
        { type: 'input', name: '承运商编号', value: '' },
        { type: 'input', name: '承运商名称', value: '' },
        { type: 'input', name: '联系人', value: '' }
      ]
    }
  },
  methods: {
    // 改值
    changevalue(name, value) {
      const index = this.searhBar.findIndex(item => item.name === name)
      this.searhBar[index].value = value
    },
    // 重置
    resetvalue() {
      this.searhBar.forEach(item => {
        item.value = ''
      })
    },
    // 搜索 点击搜素按钮获取表单组件的值
    search() {
      console.log(36, this.searhBar)
    }
  }
}
</script>

<style>

</style>
